import * as THREE from 'three'
//导入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export class SceneBasic {
  constructor() {
    this.scene = null
    this.renderer = null
    this.controls = null
    this.axes = null
    this.camera = null
    this.init()
  }
  init() {
    //创建场景
    this.scene = new THREE.Scene()
    //创建相机
    this.camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      10000
    )
    this.camera.position.set(50, 50, 50)
    this.camera.lookAt(new THREE.Vector3(10, 50, 0))
    //创建渲染器
    this.renderer = new THREE.WebGLRenderer()
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    document.getElementById('container').appendChild(this.renderer.domElement)
    //本质是一个canvas
    // console.log(this.renderer.domElement)
    //添加坐标轴
    this.axes = new THREE.AxesHelper(40)
    this.scene.add(this.axes)
    //创建轨道控制器
    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    this.controls.enableDamping = true //开启衰弱

    //点击事件
  }
  render() {
    this.renderer.render(this.scene, this.camera)
    //渲染下一帧的就会调用
    requestAnimationFrame(this.render.bind(this)) //调用指向自己
    this.controls.update()
  }
}
